<!-- 业务服务资源选择弹框 -->
<template>
	<el-dialog v-model="open" :key="dialogKey" title="请选择业务服务资源" width="1250px" :close-on-click-modal="false" append-to-body center>
		<!-- 搜索表单 -->
		<el-form :model="searchFormData" :inline="true" :label-width="125">
			<el-form-item label="业务服务资源编码" prop="resourceCode">
				<el-input style="width: 200px" v-model="searchFormData.resourceCode" placeholder="请输入业务服务资源编码" clearable class="yd-input" />
			</el-form-item>
			<el-form-item label="服务资源匹配串" prop="identifyStr">
				<el-input style="width: 200px" v-model="searchFormData.identifyStr" placeholder="请输入服务资源匹配串" clearable class="yd-input" />
			</el-form-item>
			<el-form-item label="关键字" prop="keyword" :label-width="90">
				<el-input style="width: 200px" v-model="searchFormData.keyword" placeholder="请输入关键字" clearable class="yd-input" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handlerQuery">查 询</el-button>
			</el-form-item>
		</el-form>

		<!-- 数据列表 -->
		<YdTable
			:formData="searchFormData"
			:tableConfig="tableConfig"
			:tableData="tableData.data"
			@sizeChangeHandler="handlerQuery"
			@currentChangeHandler="handlerQuery"
			@sortChangeHandler="handlerQuery"
			@selectionChangeHandler="handlerSelectionChange"
		>
		</YdTable>

		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" @click="confirmDialog">确 定</el-button>
				<el-button @click="closeDialog">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup name="SelectServerResource" lang="ts">
import { list } from '@/api/admin/businessSourceManage/businessSourceManage';
import { randomUUID } from '@/utils/common';
import { ref, reactive, toRefs } from 'vue';
import { useRoute } from 'vue-router';
import useCurrentInstance from '@/utils/useCurrentInstance';

const { proxy } = useCurrentInstance();

const dialogKey = ref(randomUUID());
// 打开状态
const open = ref(false);
// 搜索表单数据
const data = reactive<FormModelType>({
	searchFormData: {
		pageSize: 10,
		pageNum: 1,
		// 默认按启动时间降序
		orderByColumn: 'updateTime',
		isAsc: 'desc',
	},
});
const { searchFormData } = toRefs(data);
// 列表配置
let tableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '业务服务资源编码',
			prop: 'resourceCode',
			width: 200,
		},
		{
			label: '匹配串',
			prop: 'identifyStr',
			showOverFlowToolTip: true,
		},
	],
	// 开启单选框
	enableRadio: true,
	// 单选id
	radioId: 0,
	radioRow: null,
	// 开启分页
	pagination: {
		pageNum: 1,
	},
	// 加载层
	loading: true,
});
// 列表数据
let tableData = reactive({
	data: [],
});
let callBack = ref();
// 选择的行数据ids
const selectedIds = ref();
// 选择的行数据
const selected = ref();

/**
 * 选择行数据
 */
function handlerSelectionChange(selects: any) {
	selectedIds.value = selects.map((item: any) => item.id);
	selected.value = selects;
}
/**
 * 搜索
 */
function handlerQuery() {
	tableConfig.loading = true;
	list(searchFormData.value).then((res: ApiResponse) => {
		tableConfig.loading = false;
		if (res.code !== 0) {
			return;
		}
		if (res.data !== null) {
			tableData.data = res.data.records;
			tableConfig.pagination!.total = res.data.total;
		}
	});
}
// 打开选择业务服务资源弹出层
function openDialog(callBackParm: any) {
	// 初始化状态
	searchFormData.value = {
		pageSize: 10,
		pageNum: 1,
		// 默认按启动时间降序
		orderByColumn: 'updateTime',
		isAsc: 'desc',
	};
	tableConfig.radioId = 0;
	tableConfig.radioRow = null;
	dialogKey.value = randomUUID();
	// 回调
	callBack.value = callBackParm;
	// 打开窗口
	open.value = true;
	handlerQuery();
}
// 关闭选择业务服务资源弹出层
function closeDialog() {
	open.value = false;
}
// 确定
function confirmDialog() {
	callBack.value();
	open.value = false;
}
// 获取选择的业务服务资源
function getSelectServerResource() {
	console.log('tableConfig.radioRow', tableConfig.radioRow);
	if (tableConfig.radioRow === null) {
		return {};
	}
	return tableConfig.radioRow;
}
defineExpose({
	openDialog,
	getSelectServerResource,
});
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>
